<html>
<head>
<script type="text/javascript">
var gl;
// For some reason, when running this test in automated fashion, it
// triggers the bug reliably if the first frame with back-to-back
// events happens a certain number of frames into the test execution.
var numFrames = 202;
var intensity = 255;
var contextWasLost = false;

function contextLostHandler(e) {
  contextWasLost = true;
}

function draw() {
  if (--intensity == 0) {
    intensity = 255;
  }

  gl.clearColor(intensity / 255.0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  if (numFrames % 2 == 0) {
    // Toggle the state of the drop-down every other frame. Every now
    // and then, dispatch two events back to back. This really seems to
    // trigger the bug.
    var maxIteration = 1;
    if (numFrames % 6 == 0) {
      maxIteration = 2;
    }
    for (var ii = 0; ii < maxIteration; ++ii) {
      var e = document.createEvent('MouseEvent');
      e.initMouseEvent('mousedown', true, true, window);
      var s = document.getElementById('dropdown');
      s.dispatchEvent(e);
    }
  }

  if (--numFrames > 0) {
    requestAnimationFrame(draw);
  } else {
    if (contextWasLost) {
      window.domAutomationController.send("FAILED");
    } else {
      window.domAutomationController.send("SUCCESS");
    }
  }
}

function onLoad() {
  window.domAutomationController.send("LOADED");

  var canvas = document.getElementById("canvas1");
  if (!canvas)
    return;
  canvas.addEventListener("webglcontextlost", contextLostHandler, false);

  gl = canvas.getContext("webgl");
  if (!gl)
    return;

  requestAnimationFrame(draw);
}
</script>
</head>
<body onload="onLoad()">
<select id="dropdown">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>
<canvas id="canvas1" width="32px" height="32px">
</canvas>
</body>
</html>
